<script setup lang="ts">
import { defineEmits, defineProps, ref } from "vue";
import { CloseCircleOutlined, DownOutlined } from "@ant-design/icons-vue";

const props = defineProps<{
  value: number | string | null;
  dataList: Array<{ label: string; value: number }>;
  label: string;
}>();
const emit = defineEmits(["update:value"]);
const currentValue = ref(props.value);
const handleChange = (value: string) => {
  value === undefined && (currentValue.value = null);
  emit("update:value", currentValue.value);
};
</script>

<template>
  <a-form-item class="searchItem" :label="props.label">
    <a-select ref="select" v-model:value="currentValue" style="min-width: 207px" @change="handleChange" allowClear>
      <a-select-option v-for="item in props.dataList" :value="item.value">{{ item.label }}</a-select-option>
    </a-select>
  </a-form-item>
</template>

<style scoped>
.searchItem {
  margin: 10px;
}
</style>
